@import '~styles/vars';
@import '~styles/extendables';
@import '~styles/mixins';

.toolbar {
  @extend %center-x-y;
  @extend %app-width;
  position: fixed;
  top: 0;
  color: $color-white;
  padding: 5px 10px;
  z-index: 150;
  font-weight: $font-medium;

  .left,
  .right {
    width: 50%;

    .icon {
      @include icon-shadow($color-grey-shade-2, 1px);
      margin-left: 8px;
    }
  }

  .left {
    display: flex;
    align-items: center;

    time {
      font-weight: $font-bold;
      text-shadow: 0 0 1px $color-grey-shade-0;
    }

    .icon {
      font-size: 10px;
    }
  }

  .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .icon-signal {
      font-size: 12px;
    }
  }

  &.dark {
    color: $color-black;

    .left,
    .right {
      .icon {
        filter: none;
        color: $color-black;
      }
    }

    .left {
      time {
        text-shadow: none;
      }
    }
  }
}
